import React from 'react'
import {connect} from 'react-redux'
import * as StringUtils from '../../public/js/stringUtils'

class Breadcrumb extends React.Component {
    constructor(props) {
        super(props)
    }

    renderBreadcrumb() {
        let menuInfoTmp = menuInfo[this.props.selMenu], pathName = '',title = ''
        if(menuInfoTmp != null) {
            pathName =  menuInfoTmp['pathName']
        }
        if(StringUtils.isNotEmpty(pathName)) {
            let arr = pathName.split('>');
            let htmls = []
            for(let i=0;i<arr.length - 1; i++) {
                let html = (
                    <li className="breadcrumb-item" key={"breadcrumb-item_" + i}>
                        <a href="javascript:void(0);">{arr[i].trim()}</a>
                    </li>)
                htmls.push(html)
            }
            return htmls;
        }
    }

    render(){
        let menuInfoTmp = menuInfo[this.props.selMenu], pathName = '',title = ''
        if(menuInfoTmp != null) {
            pathName =  menuInfoTmp['pathName']
        }
        if(StringUtils.isNotEmpty(pathName)) {
            let arr = pathName.split('>');
            title = arr[arr.length-1].trim()
        }
        
        return (
            <div className="page-breadcrumb">
                <div className="row">
                    <div className="col-5 align-self-center">
                        <h4 className="page-title">{title}</h4>
                        <div className="d-flex align-items-center">

                        </div>
                    </div>
                    <div className="col-7 align-self-center">
                        <div className="d-flex no-block justify-content-end align-items-center">
                            <nav aria-label="breadcrumb">
                                <ol className="breadcrumb">
                                    {this.renderBreadcrumb()}
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
function mapStateToProps(state) {
    return {
        selMenu: state.selMenu
    }
  }
export default connect(mapStateToProps)(Breadcrumb)